<template>
  <div>
    <el-card>
      <template #header>
        <div class="card-header">
          <span>SKu列表</span>
        </div>
      </template>


      <el-row :gutter="20">
        <el-col :span="18"> 
          <el-input v-model="params.name" placeholder="请输入商品名称" style="width:120px;" />
          <el-input-number v-model="params.minPrice" />
          <el-input-number v-model="params.maxPrice" />
        </el-col>
        <el-col :span="6"> <el-button>查询</el-button></el-col>
      </el-row>
      <el-divider />
      <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="id" label="编号" width="180" />
          <el-table-column prop="name" label="商品名称" width="180" />
          <el-table-column prop="subtitle" label="子标题" />
          <el-table-column prop="spec" label="规格" />
          <el-table-column prop="price" label="价格" />
          <el-table-column prop="stock" label="库存" />
          <el-table-column label="操作" width="180px">
                <template #default="scope">
                    <el-button-group>
                        <el-button size="small" type="warning" :icon="Edit" @click="editRow(scope.row)">修改</el-button>

                        <el-popconfirm title="确认删除当前数据吗?" @confirm="deleteRow(scope.row.eid)">
                            <template #reference>
                                <el-button size="small" type="danger" :icon="Delete">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </el-button-group>
                </template>
            </el-table-column>
      </el-table>

      <template #footer>

        <el-pagination
          v-model:current-page="params.page"
          :page-size="params.size"
          :total="page.count"
          :page-count="page.totalPage"
          layout="total, sizes, prev, pager, next, jumper"
          :page-sizes="[10, 20, 50]"
          @size-change="initData"
          @current-change="initData"
          class="pagination-container"
        />

      </template>
    </el-card>
  </div>
</template>

<script setup>
import {ref,onMounted} from 'vue';
import {getSkuList} from '@/api/Sku'
const tableData = ref();

const page = ref({
  count:0,
  totalPage:0
});

const params = ref({
  name:'',
  minPrice:0,
  maxPrice:0,
  page:1,
  size:10
});

const initData = async ()=>{
  const rows  = await getSkuList(params.value);
  if(rows.code == 200){
    tableData.value = rows.data.rows;
    page.value.count = rows.data.count;
    page.value.totalPage = rows.data.totalPage;
  }
}

onMounted(()=>{
  initData();
});
</script>

<style></style>
